<template>
	<view class="reminder-container">
		<!-- 头部区域 -->
		<view class="header">
			<view class="title-section">
				<text class="title">健康提醒</text>
				<text class="subtitle">管理您的健康提醒</text>
			</view>
			<button class="add-btn" @click="addReminder">
				<text class="iconfont icon-add"></text>
				<text>添加</text>
			</button>
		</view>
		
		<!-- 全局提醒开关 -->
		<view class="reminder-global-switch">
			<view class="switch-info">
				<text class="switch-label">开启提醒悬浮窗</text>
				<text class="switch-desc">开启后可在任意页面显示下一个提醒</text>
			</view>
			<switch :checked="reminderEnabled" @change="toggleGlobalReminder" color="#8cc9a1" />
		</view>
		
		<!-- 分类标签页 -->
		<view class="reminder-tabs">
			<scroll-view scroll-x class="tabs-scroll" show-scrollbar="false">
				<view class="tabs-container">
					<view 
						class="tab-item" 
						v-for="(tab, index) in tabs" 
						:key="index"
						:class="{ active: currentTab === index }"
						@click="switchTab(index)"
					>
						<text class="tab-icon iconfont" :class="getTabIcon(tab.type)"></text>
						<text class="tab-name">{{ tab.name }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 提醒列表 -->
		<scroll-view scroll-y class="reminder-list-scroll" @scrolltolower="loadMore">
			<view class="reminder-list">
				<view class="empty-tip" v-if="currentList.length === 0">
					<image src="/static/images/empty-state.png" mode="aspectFit" class="empty-image"></image>
					<text class="empty-text">暂无{{ tabs[currentTab].name }}提醒</text>
					<button class="btn-add-empty" @click="addReminder">添加提醒</button>
				</view>
				
				<view 
					class="reminder-card" 
					v-for="(item, index) in currentList" 
					:key="item.id" 
					:class="{ inactive: !item.active }"
					@click="viewReminderDetail(item)"
				>
					<view class="card-left">
						<view class="type-icon-wrapper" :class="'bg-' + item.type">
							<text class="type-icon iconfont" :class="getTypeIcon(item.type)"></text>
						</view>
					</view>
					
					<view class="card-content">
						<view class="reminder-header">
							<text class="reminder-title">{{ item.title }}</text>
							<switch :checked="item.active" @change="toggleReminder(item.id, $event)" color="#8cc9a1" @click.stop />
						</view>
						
						<view class="reminder-meta">
							<view class="meta-item time">
								<text class="iconfont icon-time"></text>
								<text>{{ item.time }}</text>
							</view>
							<view class="meta-item repeat">
								<text class="iconfont icon-repeat"></text>
								<text>{{ item.repeatText || '不重复' }}</text>
							</view>
						</view>
						
						<view class="reminder-desc" v-if="item.desc">{{ item.desc }}</view>
						
						<view class="card-actions">
							<view class="action-btn edit-btn" @click.stop="editReminder(item)">
								<text class="iconfont icon-edit"></text>
								<text>编辑</text>
							</view>
							<view class="action-btn delete-btn" @click.stop="confirmDelete(item)">
								<text class="iconfont icon-delete"></text>
								<text>删除</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 底部加载提示 -->
			<view class="loading-more" v-if="isLoadingMore">
				<text class="loading-text">加载中...</text>
			</view>
		</scroll-view>
		
		<!-- 悬浮添加按钮 -->
		<view class="float-add-btn" @click="addReminder">
			<text class="iconfont icon-add"></text>
		</view>
	</view>
</template>

<script>
	import { initReminderData, getReminders, toggleReminderStatus, deleteReminder } from '@/common/api/reminder.js'
	
	export default {
		data() {
			return {
				currentTab: 0,
				tabs: [
					{ name: '全部', type: 'all', list: [] },
					{ name: '服药', type: 'medicine', list: [] },
					{ name: '血糖检测', type: 'bloodSugar', list: [] },
					{ name: '运动', type: 'exercise', list: [] },
					{ name: '饮食', type: 'diet', list: [] },
					{ name: '其他', type: 'other', list: [] }
				],
				loading: false,
				isLoadingMore: false,
				reminderEnabled: false, // 全局提醒开关状态
				allReminders: [], // 保存所有提醒
				pageInfo: {
					pageSize: 10,
					currentPage: 1,
					hasMore: true
				}
			}
		},
		computed: {
			currentList() {
				if (this.currentTab === 0) {
					// 全部提醒
					return this.allReminders;
				}
				return this.tabs[this.currentTab].list || []
			}
		},
		onLoad() {
			// 初始化本地提醒数据（如果没有）
			initReminderData()
			
			this.loadReminders()
			// 加载当前的全局提醒设置
			this.reminderEnabled = !!uni.getStorageSync('reminder_enabled')
		},
		onShow() {
			// 每次页面显示时刷新列表，确保数据最新
			this.resetPagination()
			this.loadReminders()
			// 刷新全局提醒设置
			this.reminderEnabled = !!uni.getStorageSync('reminder_enabled')
		},
		methods: {
			// 重置分页
			resetPagination() {
				this.pageInfo = {
					pageSize: 10,
					currentPage: 1,
					hasMore: true
				}
			},
			
			// 加载更多
			loadMore() {
				if (!this.pageInfo.hasMore || this.isLoadingMore) return
				
				this.pageInfo.currentPage++
				this.isLoadingMore = true
				
				// 模拟加载更多数据
				setTimeout(() => {
					this.isLoadingMore = false
					
					// 如果没有更多数据了
					if (this.allReminders.length <= this.pageInfo.pageSize * this.pageInfo.currentPage) {
						this.pageInfo.hasMore = false
					}
				}, 500)
			},
			
			// 获取标签图标
			getTabIcon(type) {
				const iconMap = {
					'all': 'icon-all',
					'medicine': 'icon-medicine',
					'bloodSugar': 'icon-blood',
					'exercise': 'icon-exercise',
					'diet': 'icon-diet',
					'other': 'icon-other'
				}
				return iconMap[type] || 'icon-other'
			},
			
			// 获取提醒类型图标
			getTypeIcon(type) {
				const iconMap = {
					'medicine': 'icon-medicine',
					'bloodSugar': 'icon-blood',
					'exercise': 'icon-exercise',
					'diet': 'icon-diet',
					'other': 'icon-other'
				}
				return iconMap[type] || 'icon-other'
			},
			
			// 获取提醒类型文本
			getTypeText(type) {
				const typeMap = {
					'medicine': '服药',
					'bloodSugar': '血糖检测',
					'exercise': '运动',
					'diet': '饮食',
					'other': '其他'
				}
				return typeMap[type] || '其他'
			},
			
			// 切换标签
			switchTab(index) {
				this.currentTab = index
				// 重置分页
				this.resetPagination()
			},
			
			// 切换全局提醒开关
			toggleGlobalReminder(e) {
				const enabled = e.detail.value
				this.reminderEnabled = enabled
				
				// 保存到本地存储
				uni.setStorageSync('reminder_enabled', enabled)
				
				// 提示信息
				uni.showToast({
					title: enabled ? '提醒已启用' : '提醒已关闭',
					icon: 'success'
				})
			},
			
			// 编辑提醒
			editReminder(reminder) {
				uni.navigateTo({
					url: `/pages/reminder/add?id=${reminder.id}&mode=edit`
				})
			},
			
			// 确认删除提醒
			confirmDelete(reminder) {
				uni.showModal({
					title: '确认删除',
					content: `是否删除提醒"${reminder.title}"？`,
					success: async (res) => {
						if (res.confirm) {
							try {
								const result = await deleteReminder(reminder.id);
								if (result.code === 0) {
									uni.showToast({
										title: '删除成功',
										icon: 'success'
									});
									// 重新加载提醒列表
									this.loadReminders();
								} else {
									throw new Error(result.message || '删除失败');
								}
							} catch (e) {
								uni.showToast({
									title: typeof e === 'string' ? e : '删除失败',
									icon: 'none'
								});
							}
						}
					}
				});
			},
			
			// 加载提醒列表
			async loadReminders() {
				if (this.loading) return
				
				this.loading = true
				uni.showLoading({
					title: '加载中...'
				})
				
				try {
					const res = await getReminders()
					if (res.code === 0) {
						// 保存所有提醒
						this.allReminders = res.data
						
						// 按类型分组
						this.tabs.forEach(tab => {
							if (tab.type === 'all') return // 跳过全部分类
							tab.list = res.data.filter(item => item.type === tab.type)
						})
					} else {
						throw new Error(res.message || '获取提醒列表失败')
					}
				} catch (e) {
					console.error('获取提醒列表失败:', e)
					uni.showToast({
						title: typeof e === 'string' ? e : '获取提醒列表失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
					uni.hideLoading()
				}
			},
			
			// 添加新提醒
			addReminder() {
				uni.navigateTo({
					url: '/pages/reminder/add'
				})
			},
			
			// 查看提醒详情
			viewReminderDetail(reminder) {
				uni.navigateTo({
					url: `/pages/reminder/detail?id=${reminder.id}`
				})
			},
			
			// 切换提醒状态
			async toggleReminder(id, event) {
				const active = event.detail.value
				
				try {
					const res = await toggleReminderStatus(id, active)
					if (res.code === 0) {
						// 提示信息
						uni.showToast({
							title: active ? '提醒已启用' : '提醒已禁用',
							icon: 'success'
						})
						
						// 刷新数据
						this.loadReminders()
					} else {
						throw new Error(res.message || '操作失败')
					}
				} catch (e) {
					console.error('切换提醒状态失败:', e)
					uni.showToast({
						title: typeof e === 'string' ? e : '操作失败',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.reminder-container {
		background-color: #f5f7fa;
		min-height: 100vh;
		position: relative;
		padding-bottom: 30rpx;
		
		.header {
			padding: 40rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.title-section {
				.title {
					font-size: 44rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 10rpx;
					display: block;
				}
				
				.subtitle {
					font-size: 26rpx;
					color: #666;
				}
			}
			
			.add-btn {
				background: linear-gradient(135deg, #8cc9a1 0%, #5daa7f 100%);
				color: #fff;
				border-radius: 40rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 30rpx;
				font-size: 28rpx;
				box-shadow: 0 8rpx 16rpx rgba(140, 201, 161, 0.2);
				border: none;
				
				.iconfont {
					margin-right: 10rpx;
					font-size: 32rpx;
				}
			}
		}
		
		.reminder-global-switch {
			margin: 0 30rpx 30rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
			
			.switch-info {
				.switch-label {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 8rpx;
					display: block;
				}
				
				.switch-desc {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
		
		.reminder-tabs {
			margin: 0 30rpx;
			background-color: #fff;
			border-radius: 16rpx 16rpx 0 0;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			padding: 20rpx 0;
			
			.tabs-scroll {
				white-space: nowrap;
				padding: 0 20rpx;
			}
			
			.tabs-container {
				display: flex;
				
				.tab-item {
					display: inline-flex;
					flex-direction: column;
					align-items: center;
					padding: 16rpx 30rpx;
					font-size: 28rpx;
					color: #666;
					position: relative;
					margin-right: 20rpx;
					transition: all 0.3s ease;
					background-color: #f9f9f9;
					border-radius: 12rpx;
					
					&.active {
						color: #fff;
						font-weight: bold;
						background: linear-gradient(135deg, #8cc9a1 0%, #5daa7f 100%);
						box-shadow: 0 4rpx 12rpx rgba(140, 201, 161, 0.2);
						transform: translateY(-2rpx);
					}
					
					.tab-icon {
						font-size: 36rpx;
						margin-bottom: 8rpx;
					}
					
					.tab-name {
						font-size: 24rpx;
					}
				}
			}
		}
		
		.reminder-list-scroll {
			height: calc(100vh - 400rpx);
			background-color: #fff;
			margin: 0 30rpx;
			border-radius: 0 0 16rpx 16rpx;
			padding: 20rpx;
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		}
		
		.reminder-list {
			padding-bottom: 100rpx;
			
			.empty-tip {
				padding: 80rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				
				.empty-image {
					width: 240rpx;
					height: 240rpx;
					margin-bottom: 30rpx;
				}
				
				.empty-text {
					font-size: 28rpx;
					color: #999;
					margin-bottom: 40rpx;
				}
				
				.btn-add-empty {
					background: linear-gradient(135deg, #8cc9a1 0%, #5daa7f 100%);
					color: #fff;
					border-radius: 40rpx;
					padding: 20rpx 60rpx;
					font-size: 28rpx;
					box-shadow: 0 8rpx 16rpx rgba(140, 201, 161, 0.2);
					border: none;
				}
			}
			
			.reminder-card {
				background-color: #fff;
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
				overflow: hidden;
				transition: all 0.3s ease;
				border: 1px solid #f0f0f0;
				display: flex;
				
				&:active {
					transform: scale(0.98);
				}
				
				&.inactive {
					opacity: 0.7;
					background-color: #f9f9f9;
				}
				
				.card-left {
					width: 100rpx;
					height: auto;
					display: flex;
					justify-content: center;
					align-items: flex-start;
					padding-top: 30rpx;
					
					.type-icon-wrapper {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
						
						&.bg-medicine {
							background: linear-gradient(135deg, #5e9dff 0%, #3a7fdb 100%);
						}
						
						&.bg-bloodSugar {
							background: linear-gradient(135deg, #ff6b6b 0%, #e04848 100%);
						}
						
						&.bg-exercise {
							background: linear-gradient(135deg, #ffaa5e 0%, #ff8c2c 100%);
						}
						
						&.bg-diet {
							background: linear-gradient(135deg, #8cc9a1 0%, #5daa7f 100%);
						}
						
						&.bg-other {
							background: linear-gradient(135deg, #a18cff 0%, #8269e6 100%);
						}
						
						.type-icon {
							font-size: 36rpx;
							color: #fff;
						}
					}
				}
				
				.card-content {
					flex: 1;
					padding: 24rpx 24rpx 24rpx 10rpx;
					
					.reminder-header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 16rpx;
						
						.reminder-title {
							font-size: 34rpx;
							font-weight: bold;
							color: #333;
							max-width: 75%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					
					.reminder-meta {
						display: flex;
						flex-wrap: wrap;
						margin-bottom: 16rpx;
						
						.meta-item {
							display: flex;
							align-items: center;
							font-size: 26rpx;
							color: #666;
							margin-right: 30rpx;
							margin-bottom: 10rpx;
							
							.iconfont {
								font-size: 26rpx;
								margin-right: 8rpx;
								color: #8cc9a1;
							}
						}
					}
					
					.reminder-desc {
						font-size: 26rpx;
						color: #666;
						line-height: 1.5;
						background-color: #f9f9f9;
						padding: 16rpx;
						border-radius: 8rpx;
						margin-bottom: 16rpx;
						max-height: 120rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
					}
					
					.card-actions {
						display: flex;
						border-top: 1px solid #f5f5f5;
						margin-top: 16rpx;
						padding-top: 16rpx;
						
						.action-btn {
							flex: 1;
							height: 70rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 26rpx;
							border-radius: 8rpx;
							transition: all 0.2s ease;
							
							&:first-child {
								margin-right: 10rpx;
							}
							
							.iconfont {
								margin-right: 8rpx;
								font-size: 28rpx;
							}
							
							&.edit-btn {
								color: #5e9dff;
								background-color: rgba(94, 157, 255, 0.1);
								
								&:active {
									background-color: rgba(94, 157, 255, 0.2);
								}
							}
							
							&.delete-btn {
								color: #ff6b6b;
								background-color: rgba(255, 107, 107, 0.1);
								
								&:active {
									background-color: rgba(255, 107, 107, 0.2);
								}
							}
						}
					}
				}
			}
		}
		
		.loading-more {
			text-align: center;
			padding: 20rpx 0;
			
			.loading-text {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.float-add-btn {
			position: fixed;
			bottom: 40rpx;
			right: 40rpx;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background: linear-gradient(135deg, #8cc9a1 0%, #5daa7f 100%);
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0 8rpx 20rpx rgba(140, 201, 161, 0.3);
			z-index: 999;
			
			.iconfont {
				font-size: 50rpx;
				color: #fff;
			}
			
			&:active {
				transform: scale(0.95);
			}
		}
	}
</style> 